'use client'
import React, {ReactElement, useState} from "react"
import styles from "./index.module.scss"

interface FormItemProps{
  className?: string
  label: string
  name: string
  errors: any
  children: React.ReactElement | any
  customFormItemValue?: string
  customFormItemLabel?: string
}

const FormItem : React.FC<FormItemProps>= ({className = "", label = "", errors, name, children, customFormItemLabel, customFormItemValue = ''}) => {
  return <div className={`${styles['formItem-component']} ${className}`}>
      <label className={`${styles['formItem-label']} ${customFormItemLabel}`}>{label}</label>
      <div className={`${styles["formItem-value"]} ${customFormItemValue}`}>
        <div className={`${styles["formItem-formType"]}`}>{children}</div>
        <div className={`${styles["formItem-errors"]}`}>{ errors?.[name] && <p>{errors?.[name]?.message}</p> }</div>
      </div>
  </div>
}

export default FormItem;